<ng-container *ngIf="project.permissions.writable">
  <h3>Create an integration:</h3>
  <form nz-form>
    <nz-form-item>
      <nz-form-label>Model</nz-form-label>
      <nz-form-control>
        <nz-select nzShowSearch name="model" [ngModel]="newIntegration.model" (ngModelChange)="updateConfig($event)">
          <nz-option *ngFor="let m of models" [nzLabel]="m.name" nzCustomContent [nzValue]="m">
            <div>{{ m.name }}</div>
            <ng-container *ngIf="m.storage">
              <nz-tag nzColor="success">storage</nz-tag>
            </ng-container>
            <ng-container *ngIf="m.hook">
              <nz-tag nzColor="success">hook</nz-tag>
            </ng-container>
            <ng-container *ngIf="m.event">
              <nz-tag nzColor="success">event</nz-tag>
            </ng-container>
            <ng-container *ngIf="m.deployment">
              <nz-tag nzColor="success">deployment</nz-tag>
            </ng-container>
          </nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <ng-container *ngIf="newIntegration.model">
      <nz-form-item>
        <nz-form-label [nzSpan]="5">Integration name</nz-form-label>
        <nz-form-control>
          <input nz-input name="name" type="text" [(ngModel)]="newIntegration.name">
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngFor="let k of newIntegration.model.default_config | keys">
        <nz-form-label [nzSpan]="5">
          {{k}}
          <span *ngIf="newIntegration.config[k].description" nz-tooltip
            [nzTooltipTitle]="newIntegration.config[k].description" nzTooltipPlacement="right">
            <i nz-icon nzType="info-circle" nzTheme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control>
          <label *ngIf="newIntegration.config[k].type === 'boolean'" nz-checkbox name="{{k}}"
            [(ngModel)]="newIntegration.config[k].value"></label>
          <input nz-input type="text" name="{{k}}" [(ngModel)]="newIntegration.config[k].value"
            *ngIf="newIntegration.config[k].type === 'string'">
          <ng-container *ngIf="newIntegration.config[k].type === 'text'">
            <codemirror [(ngModel)]="newIntegration.config[k].value" [config]="codeMirrorConfig" #codeMirror>
            </codemirror>
          </ng-container>
          <input nz-input type="password" name="{{k}}" [(ngModel)]="newIntegration.config[k].value"
            *ngIf="newIntegration.config[k].type === 'password'">
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control class="controls">
          <button nz-button nzType="primary" type="button" (click)="create()" [nzLoading]="loading.action"
            [disabled]="loading.action || !newIntegration.name || newIntegration.name === '' || !newIntegration.model">Add</button>
          <button nz-button type="button" (click)="cancel()" [nzLoading]="loading.action"
            [disabled]="loading.action">Cancel</button>
        </nz-form-control>
      </nz-form-item>
    </ng-container>
  </form>
</ng-container>

<h3>Integrations list:</h3>
<div class="list">
  <nz-table [nzData]="this.integrations" #integList [nsAutoHeightTable]="39" #autoHeightDirective="nsAutoHeightTable"
    [nzFrontPagination]="false" nzSize="small" [nzLoading]="loading.list">
    <thead>
      <tr>
        <th nzWidth="100px">Name</th>
        <th nzWidth="100px">Model</th>
        <th nzWidth="300px">Configuration</th>
        <th nzWidth="25px"></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let p of integList.data">
        <td>
          {{ p.name }}
          <span *ngIf="p.model.public" nz-tooltip nzTooltipTitle="Public integration" nzTooltipPlacement="top">
            <i nz-icon nzType="check-circle" nzTheme="outline" class="green"></i>
          </span>
        </td>
        <td>
          {{ p.model.name}}
        </td>
        <td>
          <form nz-form>
            <nz-form-item *ngFor="let k of p.config | keys">
              <nz-form-label [nzSpan]="12">
                {{k}}
                <span *ngIf="p.config[k].description" nz-tooltip [nzTooltipTitle]="p.config[k].description"
                  nzTooltipPlacement="right">
                  <i nz-icon nzType="info-circle" nzTheme="outline"></i>
                </span>
              </nz-form-label>
              <nz-form-control>
                <ng-container *ngIf="p.config[k].static">
                  <input nz-input type="text" name="{{k}}-value" *ngIf="p.config[k].type !== 'password'"
                    [(ngModel)]="p.config[k].value" readonly>
                  <input nz-input type="password" name="{{k}}-value" *ngIf="p.config[k].type === 'password'"
                    [(ngModel)]="p.config[k].value" readonly>
                </ng-container>
                <ng-container *ngIf="!p.config[k].static">
                  <input type="checkbox" name="{{k}}-value" [(ngModel)]="p.config[k].value"
                    *ngIf="p.config[k].type === 'boolean'" (keydown)="p.hasChanged = true"
                    [readonly]="p.model.public" />
                  <input nz-input type="text" name="{{k}}-value" [(ngModel)]="p.config[k].value"
                    *ngIf="p.config[k].type === 'string'" (keydown)="p.hasChanged = true" [readonly]="p.model.public">
                  <ng-container *ngIf="p.config[k].type === 'text'">
                    <codemirror *ngIf="p.model.public" name="{{k}}-value" [(ngModel)]="p.config[k].value"
                      [config]="codeMirrorConfigRO" #codeMirror (keydown)="p.hasChanged = true">
                    </codemirror>
                    <codemirror *ngIf="!p.model.public" name="{{k}}-value" [(ngModel)]="p.config[k].value"
                      [config]="codeMirrorConfig" #codeMirror (keydown)="p.hasChanged = true">
                    </codemirror>
                  </ng-container>
                  <input nz-input type="password" name="{{k}}-value" [(ngModel)]="p.config[k].value"
                    *ngIf="p.config[k].type === 'password'" (keydown)="p.hasChanged = true" [readonly]="p.model.public">
                </ng-container>
              </nz-form-control>
            </nz-form-item>
          </form>
        </td>
        <td>
          <ng-container *ngIf="project.permissions.writable && !p.model.public">
            <button *ngIf="!p.hasChanged" nz-button nzDanger nzType="primary" [nzLoading]="loading.action"
              [disabled]="loading.action" nz-popconfirm
              nzPopconfirmTitle="Are you sure you want to delete this integration ?"
              (nzOnConfirm)="deleteIntegration(p)">
              Delete
            </button>
            <button nz-button nzType="primary" type="button" *ngIf="p.hasChanged" [nzLoading]="loading.action"
              (click)="updateIntegration(p)">Save</button>
          </ng-container>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>